<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* li:first-child {
        background-color: red;
      } */

      /* li:last-child {
        background-color: red;
      } */

      /* li:nth-child(2n - 1) {
        background-color: red;
      } */

      /* li:nth-last-child(2) {
        background-color: red;
      } */

      /* li:first-of-type {
        background-color: red;
      } */

      /* li:last-of-type {
        background-color: red;
      } */

      /* li:nth-of-type(2n - 1) {
        background-color: red;
      }
      li:nth-of-type(2n) {
        background-color: yellow;
      } */

      /* li:nth-last-of-type(3) {} */

      /* ul li:nth-child(3):hover + li {
        background-color: red;
      } */
    </style>
  </head>
  <body>
    <!-- <li>这是外面的li标签</li> -->
    <ul>
      <li>这是第1个li标签</li>
      <li>这是第2个li标签</li>
      <li>这是第3个li标签</li>
      <li>这是第4个li标签</li>
      <li>这是第5个li标签</li>
      <li>这是第6个li标签</li>
      <li>这是第7个li标签</li>
      <li>这是第8个li标签</li>
      <li>这是第9个li标签</li>
    </ul>
    <ol>
      <li>这是第1个li标签</li>
      <li>这是第2个li标签</li>
      <li>这是第3个li标签</li>
      <li>这是第4个li标签</li>
      <li>这是第5个li标签</li>
      <li>这是第6个li标签</li>
      <li>这是第7个li标签</li>
      <li>这是第8个li标签</li>
      <li>这是第9个li标签</li>
    </ol>

    <li>这是外面的li标签</li>
  </body>
</html>

<!-- 
  结构伪类选择器

    1. x:first-child  找到页面里面所有的x元素，并且找到他们所在的子集,再看这个子集里面的第一个元素是否是x，是的话就加样式，不是就不加
    2. x:last-child  找到页面里面所有的x元素，并且找到他们所在的子集,再看这个子集里面的最后一个元素是否是x，是的话就加样式，不是就不加
    3. x:nth-child(n)  找到页面里面所有的x元素，并且找到他们所在的子集,再看这个子集里面的第n个元素是否是x，是的话就加样式，不是就不加
      还可以用2n，或者3n-1 等操作，用于做隔行变色等
    4. x:nth-last-child(n)  找到页面里面所有的x元素，并且找到他们所在的子集,再看这个子集里面的倒数第n个元素是否是x，是的话就加样式，不是就不加



    5. x:first-of-type  找到页面里面所有的x元素，并且找到他们所在的子集, 直接给子集里面的第一个x加样式
    6. x:last-of-type  找到页面里面所有的x元素，并且找到他们所在的子集, 直接给子集里面的最后一个x加样式
    7. x:nth-of-type(n)  找到页面里面所有的x元素，并且找到他们所在的子集, 直接给子集里面的第n个x加样式
    8. x:nth-last-of-type(n)  找到页面里面所有的x元素，并且找到他们所在的子集, 直接给子集里面的倒数第n个x加样式

 -->
